import { Card } from "antd";
import React from "react";

const Application = () => {
    return <div className="flex">
        <Card title="传统布局方式" hoverable={true} className="mr-12px max-w-400px">
            <div className="w-full">
                <h1>文档流布局</h1>
                <div className="w-full h-20px bg-gray-200 m-8px">
                    <span>我是标题：</span>
                    <span>第一块</span>
                </div>
                <div className="w-full h-20px m-8px bg-red-200">
                    <span>我是标题：</span>
                    <span>第二块</span>
                </div>
                <div className="w-full h-20px m-8px bg-red-300">
                    <span>我是标题：</span>
                    <span>第三块</span>
                </div>
                <div className="w-full h-20px m-8px bg-red-400">
                    <span>我是标题：</span>
                    <span>第四块</span>
                </div>
            </div>
            <div className="w-full">
                <h1>table布局</h1>
            </div>
            <div className="w-full">
                <h1>float布局</h1>
            </div>
        </Card>
        <Card title="现代布局" hoverable={true} className="mr-12px max-w-400px">
            <div className="w-full">
                <h1>flex布局</h1>
            </div>
            <div className="w-full">
                <h1>table布局</h1>
            </div>
            <div className="w-full">
                <h1>float布局</h1>
            </div>
        </Card>
    </div>
}

export default Application